<template>
  <div>
    <div class="componentTitle">涉尘信息</div>
    <div class="dustList">
      <div class="dustLabel">
        <div class="dustLabelItem">涉及粉尘生产工艺</div>
        <div class="dustLabelItem">粉尘种类</div>
        <div class="dustLabelItem">日产尘量（KG）</div>
        <div class="dustLabelItem">企业单班最高涉粉作业人数</div>
        <div class="dustLabelItem">企业涉粉作业总人数</div>
        <div class="edit">操作</div>
      </div>
      <div class="dustValue">
        <div class="dustValueItem">
          <el-select
            multiple
            v-model="form1.dustTechnology"
            placeholder="请选择"
          >
            <el-option
              v-for="item in dustTechnologyList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dustValueItem">
          <el-select v-model="form1.dustType" placeholder="请选择">
            <el-option
              v-for="item in dustTypeList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dustValueItem">
          <el-input
            v-model="form1.dailyDustOutput"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="dustValueItem">
          <el-input
            v-model="form1.workersNumber"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="dustValueItem">
          <el-input
            v-model="form1.allWorkersNumber"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="edit" @click="submitTopForm">保存</div>
      </div>
    </div>
    <div class="componentTitle">企业其他涉及粉尘信息</div>
    <div class="dustOtherList">
      <div class="dustLabel">
        <div class="dustLabelItem">其他粉尘种类</div>
        <div class="dustLabelItem">其他粉尘对应日产尘量(KG)</div>
        <div class="edit">操作</div>
      </div>
      <div class="dustValue">
        <div class="dustValueItem">
          <el-select v-model="form2.dustType" placeholder="请选择">
            <el-option
              v-for="item in dustTypeList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dustValueItem">
          <el-input
            v-model="form2.dailyDustOutput"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="edit" @click="submitMForm">保存</div>
      </div>
    </div>
    <div class="componentTitle">设备设施信息</div>
    <div class="addDeviceBtn" @click="addCompany()">添加</div>
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="equipName"
          label="设备名称"
          align="center"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="placeCode"
          label="设备安装位置"
          width="180"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipTypeName"
          label="设备类型"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipFactory"
          label="设备厂家"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="bombControlName"
          label="相关控爆措施"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="installAreaName"
          label="安装区域"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dustType"
          label="除尘种类"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="workersNumber"
          width="160"
          label="本除尘设备相关岗位单班最高涉粉作业人数"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dustTechnologyName"
          label="关联高风险工艺设备"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="equipStatus"
          label="设备运行"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div
              v-if="scope.row.equipStatus == '0'"
              style="color: #f56c6c; font-weight: 500"
            >
              停用
            </div>
            <div v-if="scope.row.equipStatus == '1'">在用</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="dailyDustOutput"
          width="110"
          label="本除尘设备日产尘量(kg)"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="dealWay"
          label="操作"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              style="color: #269e8f"
              type="text"
              @click="addCompany(scope.row)"
              >编辑</el-button
            >
            <el-button
              style="color: #f56c6c"
              type="text"
              @click="deleteCompany(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1218px"
      :before-close="handleClose"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
      top="10%"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="设备名称">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.equipName"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备编码">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.equipCode"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="设备类型">
                  <el-select v-model="form.equipType" placeholder="请选择">
                    <el-option
                      v-for="item in equipTypeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备厂家">
                  <el-input
                    placeholder="请输入"
                    v-model="form.equipFactory"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安装日期">
                  <el-date-picker
                    :disabled="seeForm"
                    v-model="form.setDate"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备安装位置">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.placeCode"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="安装区域">
                  <el-select v-model="form.installArea" placeholder="请选择">
                    <el-option
                      v-for="item in installAreaList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="相关控爆措施">
                  <el-select
                    multiple
                    v-model="form.bombControl"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in bombControlList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item
                  class="label-class"
                  label="本除尘设备相关岗位单班最高涉粉作业人数"
                >
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.workersNumber"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="关联高风险工艺设备">
                  <el-select
                    multiple
                    v-model="form.dustTechnology"
                    placeholder="请选择"
                    @change="handleChangeMul"
                  >
                    <el-option
                      v-for="item in dustRiskTechnologyList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="除尘种类">
                  <el-select v-model="form.dustType" placeholder="请选择">
                    <el-option
                      v-for="item in dustTypeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="本除尘设备日产尘量(kg)">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.dailyDustOutput"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="设备运行">
                  <el-select v-model="form.equipStatus" placeholder="请选择">
                    <el-option
                      v-for="item in equipStatusList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  dict,
  dustInfoList,
  saveOrUpdateDustInfo,
  saveOrUpdateDustOtherInfo,
  dustOtherInfoList,
  dustEquipInfoList,
  saveOrUpdateDustEquipInfo,
  deleteDustEquipInfo,
} from '@/api/corporatePersonalityDataDetail/dustCompany'
export default {
  name: 'dustCompany',
  props: {},
  components: {},
  data() {
    return {
      input: '',
      value: '',
      tableData: [],
      form: {
        equipName: '',
        equipCode: '',
        equipType: '',
        equipFactory: '',
        setDate: '',
        placeCode: '',
        installArea: '',
        bombControl: '',
        workersNumber: '',
        dustTechnology: '',
        dustType: '',
        dailyDustOutput: '',
        equipStatus: '',
      },
      seeForm: false,
      dialogTitle: '新增传感指标数据',
      rules: {
        companyName: [
          {
            required: true,
            message: 'companyName is required',
            trigger: 'blur',
          },
        ],
      },
      dialogVisible: false,
      queryList: {
        companyId: '',
        companyCode: '',
        equipCompanyName: '',
        areaCode: '',
      },
      dustTechnologyList: [],
      dustTypeList: [],
      form1: {
        dustTechnology: '',
        dustType: '',
        dailyDustOutput: '',
        workersNumber: '',
        allWorkersNumber: '',
      },
      form2: {
        dustType: '',
        dailyDustOutput: '',
      },
      params: {
        pageNum: 1,
        pageSize: 10,
        companyCode: '',
      },
      equipTypeList: [],
      bombControlList: [],
      installAreaList: [
        {
          label: '室内',
          value: 1,
        },
        {
          label: '室外',
          value: 2,
        },
      ],
      equipStatusList: [
        {
          label: '停用',
          value: 0,
        },
        {
          label: '在用',
          value: 1,
        },
      ],
      props: { multiple: true, expandTrigger: 'hover' },
      dustRiskTechnologyList: [],
    }
  },
  created() {
    this.queryList = this.$route.query
    this.params.companyCode = this.$route.query.companyCode
    // console.log(this.$route.query)
    this.dustEquipInfoList(this.params)
    this.dustInfoList(this.queryList.companyId)
    this.dustOtherInfoList(this.queryList.companyId)
    this.dustTechnology('dust_technology')
    this.dustType('dust_type')
    this.equipType('equip_type')
    this.bombControl('bomb_control')
    this.dustRiskTechnology('dust_risk_technology')
    this.installAreaF('install_area')
    this.equipStatusF('equip_status')
  },
  methods: {
    addCompany(row) {
      if (!row) {
        this.dialogTitle = '新增设备设施信息'
      } else {
        this.form = {
          ...row,
          bombControl: row.bombControl.split(','),
          dustTechnology: row.dustTechnology.split(','),
        }
        this.dialogTitle = '编辑设备设施信息'
      }
      this.dialogVisible = true
    },
    async submitForm() {
      if (
        this.form.equipName === '' ||
        this.form.equipName === undefined ||
        this.form.equipName === null ||
        this.form.equipCode === '' ||
        this.form.equipCode === undefined ||
        this.form.equipCode === null ||
        this.form.equipType === '' ||
        this.form.equipType === undefined ||
        this.form.equipType === null ||
        this.form.equipFactory === '' ||
        this.form.equipFactory === undefined ||
        this.form.equipFactory === null ||
        this.form.setDate === '' ||
        this.form.setDate === undefined ||
        this.form.setDate === null ||
        this.form.placeCode === '' ||
        this.form.placeCode === undefined ||
        this.form.placeCode === null ||
        this.form.installArea === '' ||
        this.form.installArea === undefined ||
        this.form.installArea === null ||
        this.form.bombControl === '' ||
        this.form.bombControl === undefined ||
        this.form.bombControl === null ||
        this.form.workersNumber === '' ||
        this.form.workersNumber === undefined ||
        this.form.workersNumber === null ||
        this.form.dustTechnology === '' ||
        this.form.dustTechnology === undefined ||
        this.form.dustTechnology === null ||
        this.form.dustType === '' ||
        this.form.dustType === undefined ||
        this.form.dustType === null ||
        this.form.dailyDustOutput === '' ||
        this.form.dailyDustOutput === undefined ||
        this.form.dailyDustOutput === null ||
        this.form.equipStatus === '' ||
        this.form.equipStatus === undefined ||
        this.form.equipStatus === null
      ) {
        this.$message.warning('请先完善设备设施信息')
        return
      }
      if (this.form.id) {
        const obj = {
          ...this.form,
          areaCode: this.queryList.areaCode,
          companyId: this.queryList.companyId,
          companyCode: this.queryList.companyCode,
          bombControl: this.form.bombControl.join(','),
          dustTechnology: this.form.dustTechnology.join(','),
          equipCompanyName: this.form.companyName,
          pointCode: this.form.placeCode,
        }
        const res = await saveOrUpdateDustEquipInfo(obj)
        if (res.data) {
          this.$message.success('保存成功')
          this.handleClose()
          this.dustEquipInfoList(this.params)
        } else {
          this.$message.error('保存失败')
        }
      } else {
        const obj = {
          id: null,
          ...this.form,
          areaCode: this.queryList.areaCode,
          companyId: this.queryList.companyId,
          companyCode: this.queryList.companyCode,
          bombControl: this.form.bombControl.join(','),
          dustTechnology: this.form.dustTechnology.join(','),
          equipCompanyName: this.form.companyName,
          pointCode: this.form.placeCode,
        }
        const res = await saveOrUpdateDustEquipInfo(obj)
        if (res.data) {
          this.$message.success('保存成功')
          this.handleClose()
          this.dustEquipInfoList(this.params)
        } else {
          this.$message.error('保存失败')
        }
      }
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        equipName: '',
        equipCode: '',
        equipType: '',
        equipFactory: '',
        setDate: '',
        placeCode: '',
        installArea: '',
        bombControl: '',
        workersNumber: '',
        dustTechnology: '',
        dustType: '',
        dailyDustOutput: '',
        equipStatus: '',
      }
    },
    async deleteCompany(row) {
      const res = await deleteDustEquipInfo({
        id: row.id,
        companyId: +this.queryList.companyId,
      })
      if (res.data) {
        this.$message.success('删除成功')
        this.dustEquipInfoList(this.params)
      } else {
        this.$message.error('删除失败')
      }
    },
    async dustTechnology(dictType) {
      const res = await dict({ dictType })
      this.dustTechnologyList = res.data
    },
    async dustType(dictType) {
      const res = await dict({ dictType })
      this.dustTypeList = res.data
    },
    async submitTopForm() {
      if (
        this.form1.dustTechnology === '' ||
        this.form1.dustTechnology === undefined ||
        this.form1.dustTechnology === null ||
        this.form1.dustType === '' ||
        this.form1.dustType === undefined ||
        this.form1.dustType === null ||
        this.form1.dailyDustOutput === '' ||
        this.form1.dailyDustOutput === undefined ||
        this.form1.dailyDustOutput === null ||
        this.form1.workersNumber === '' ||
        this.form1.workersNumber === undefined ||
        this.form1.workersNumber === null ||
        this.form1.allWorkersNumber === '' ||
        this.form1.allWorkersNumber === undefined ||
        this.form1.allWorkersNumber === null
      ) {
        this.$message.warning('请先完善涉尘信息')
        return
      }
      if (this.form1.id) {
        const obj = {
          ...this.form1,
          dustTechnology: this.form1.dustTechnology.join(','),
        }
        const res = await saveOrUpdateDustInfo(obj)
        this.renderSuccess(res)
      } else {
        const obj = {
          ...this.form1,
          id: null,
          dustTechnology: this.form1.dustTechnology.join(','),
          companyId: this.queryList.companyId,
          companyCode: this.queryList.companyCode,
        }
        const res = await saveOrUpdateDustInfo(obj)
        this.renderSuccess(res)
      }
    },
    async dustInfoList(companyId) {
      const res = await dustInfoList({ companyId })
      const obj = res.data[0]
      // console.log(obj)
      this.form1 = {
        ...obj,
        dustTechnology: obj.dustTechnology.split(','),
        dustType: obj.dustType,
        dailyDustOutput: obj.dailyDustOutput,
        workersNumber: obj.workersNumber,
        allWorkersNumber: obj.allWorkersNumber,
      }
    },
    async dustOtherInfoList(companyId) {
      const res = await dustOtherInfoList({ companyId })
      const obj = res.data[0]
      this.form2 = {
        ...obj,
        dustType: obj.dustType,
        dailyDustOutput: obj.dailyDustOutput,
      }
    },
    async submitMForm() {
      if (
        this.form2.dustType === '' ||
        this.form2.dustType === undefined ||
        this.form2.dustType === null ||
        this.form2.dailyDustOutput === '' ||
        this.form2.dailyDustOutput === undefined ||
        this.form2.dailyDustOutput === null
      ) {
        this.$message.warning('请先完善企业其他涉及粉尘信息')
        return
      }
      if (this.form2.id) {
        const obj = {
          ...this.form2,
        }
        const res = await saveOrUpdateDustOtherInfo(obj)
        this.renderSuccess(res)
      } else {
        const obj = {
          ...this.form2,
          id: null,
          companyId: this.queryList.companyId,
          companyCode: this.queryList.companyCode,
        }
        const res = await saveOrUpdateDustOtherInfo(obj)
        this.renderSuccess(res)
      }
    },
    async dustEquipInfoList(obj) {
      const res = await dustEquipInfoList(obj)
      this.tableData = res.data.list
    },
    async equipType(dictType) {
      const res = await dict({ dictType })
      this.equipTypeList = res.data
    },
    async bombControl(dictType) {
      const res = await dict({ dictType })
      this.bombControlList = res.data
    },
    handleChangeMul(list) {
      if (list.find((item) => item === '5')) {
        this.form.dustTechnology = ['5']
      }
      if (list[0] === '5' && list.length > 1) {
        this.form.dustTechnology = list.slice(1)
      }
    },
    async dustRiskTechnology(dictType) {
      const res = await dict({ dictType })
      this.dustRiskTechnologyList = res.data
    },
    renderSuccess(res) {
      if (res.data) {
        this.$message.success('保存成功')
      } else {
        this.$message.error('保存失败')
      }
    },
    async installAreaF(dictType) {
      const res = await dict({ dictType })
      this.installAreaList = res.data
    },
    async equipStatusF(dictType) {
      const res = await dict({ dictType })
      this.equipStatusList = res.data
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.componentTitle {
  color: #303133;
  font-size: 16px;
  font-weight: bold;
}
.dustList {
  padding-top: 15px;
  color: #909399;
  margin-bottom: 40px;
  .dustLabel {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #dcdfe5;
    .dustLabelItem {
      width: 18%;
    }
  }
  .dustValue {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dcdfe5;
    .dustValueItem {
      width: 18%;
      .el-input {
        width: 135px;
      }
      .el-select {
        width: 250px;
      }
    }
    .edit {
      color: #269e8f;
      cursor: pointer;
    }
  }
}
.dustOtherList {
  padding-top: 15px;
  color: #909399;
  margin-bottom: 40px;
  .dustLabel {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #dcdfe5;
    .dustLabelItem {
      width: 45%;
    }
  }
  .dustValue {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dcdfe5;
    .dustValueItem {
      width: 45%;
      .el-input {
        width: 135px;
      }
      .el-select {
        width: 250px;
      }
    }
    .edit {
      color: #269e8f;
      cursor: pointer;
    }
  }
}
.addDeviceBtn {
  width: 78px;
  height: 32px;
  background-color: #269e8f;
  color: #fff;
  text-align: center;
  line-height: 32px;
  border-radius: 3px;
  margin-top: 15px;
  cursor: pointer;
}

.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
}
::v-deep .el-dialog__header {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .leftCancel {
    margin-left: 77px;
    background-color: #269e8f;
    border: 1px solid #269e8f;
  }
}
.dialogForm {
  .label-class::v-deep .el-form-item__label {
    white-space: pre-line !important;
    line-height: 18px !important;
  }
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .left {
      width: 50%;
    }
    .right {
      width: 50%;
    }
    ::v-deep .el-input {
      width: 260px;
    }
  }
}
::v-deep.dialogCompany {
  border-radius: 20px;
}
</style>
